<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    ul{
        list-style: none;
    }
    .header li {
        display: inline-block;
        border:1px solid #000;
        padding:5px;
    }
    .active {
        background: #000;
        color:#fff;
    }
    .left{
        display: inline-block;
    }
    .left img {
        width: 264px;
    }
    .middle{
        display: inline-block;
        width: 500px;
    }
    .price{
        font-size:20px;
        color:red;
    }
    .room_tags{ margin-bottom: 20px;}
    .room_tags span{border-radius: 5px; color: #fff; font-size: 14px; padding: 0 10px; line-height: 28px; display: inline-block; margin: 0 10px 0 0; float: left;}
    .room_tags .toilet{color: #3598db; border:solid 1px #3598db;}
    .room_tags .balcony{color: #01bd9c; border:solid 1px #01bd9c;}
    .room_tags .style{color: #ffa000; border:solid 1px #ffa000;}
    .room_tags .subway{color: #e64d3d; border:solid 1px #e64d3d;}
</style>
<ul class="header"></ul>
<ul class="body">

</ul>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/underscore/underscore-min.js"></script>

<script>

    $(function(){
        var headerTpl=`
           <%for(var i=0;i<houseList.length;i++){var house=houseList[i];%>
            <li><%= house.name %></li>
           <%}%>
        `;
        var houseList;
        var compiled;
        $.get('./tpl.html',function(tpl){
            compiled = _.template(tpl);
        });

        $.getJSON('./houselist.json', function (data) {
            houseList=data;
            var t = _.template(headerTpl);
            var html = t({houseList:data});
            $('ul.header').html(html);
            $('.header li').on('click',function(){
                $('.header li').removeClass('active');
                $(this).addClass('active');
                load($(this).text());
            });
        });

        function load(name){
            var data,time;
            for(var i=0;i<houseList.length;i++){
                if(houseList[i].name == name){
                    data = houseList[i];
                    break;
                }
            }
            time = data.time;
            var list = data.list.sort(function(v1,v2){
               return v1.priceRatio - v2.priceRatio;
            });
            var html = compiled({houselist:list,time:time});
            $('.body').html(html);
        }
    });
</script>
</body>
</html>